<template>
  <div>
    <nav-bar>
      <div slot="center">个人辅助工时申请</div>
    </nav-bar>
    
    <van-nav-bar
      class="app-nav-bar"
      title="辅助工时已申请列表"
      left-arrow
      @click-left="onClickLeft()"
    />
    
    <div class="m-grid">
      <table border="0" cellPadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>工作内容</th>
            <th>频次</th>
            <th>工时</th>
            <th>说明</th>
            <th>审核结果</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(data, index) in applyDoneList" :key="index">
            <td>{{ data.APPLYCONTENT }}</td>
            <td>{{ data.STEPPER }}</td>
            <td>{{ data.STEPPER * data.STANDARDTIME }}</td>
            <td>{{ data.CONTENT }}</td>
            <td v-if="data.STATUS === '0'">
              <button style="background-color: #e2bb0b">待审核</button>
            </td>
            <td v-if="data.STATUS === '1'"><button>已通过</button></td>
            <td v-if="data.STATUS === '2'">
              <button style="background-color: #d9001b">拒绝</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/NavBar.vue'
import { getDoneApplyTimeList } from "../../api/perfrom";
export default {
  name: "applydonelist",
  data() {
    return {
      applyDoneList: "",
    };
  },
  components: {
    NavBar,
  },
  methods: {
    onClickLeft() {
      this.$router.push("/perform");
    },
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
    next();
  },
  mounted() {
    const user = JSON.parse(window.localStorage.user);
    if (user) {
      getDoneApplyTimeList(user)
      .then((res) => {
        this.applyDoneList = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
    } else {
      Dialog.confirm({
        message: "当前没有登录信息,请点击确认跳转登录",
        theme: "round-button",
        closeOnClickOverlay: true,
        confirmButtonColor: "#066ef4",
        cancelButtonColor: "#1890FF",
      })
        .then(() => {
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
        });
    }
    
  },
};
</script>

<style scoped lang="less">
.m-grid {
  margin-top: 136px;
}
table {
  width: 100%;
  padding: 0 5px 0 3px;
}
table tr th {
  color: #646566;
  font-weight: 300;
  padding: 0.3rem 0.1rem;
  font-size: 0.4rem;
  border-bottom: 1px solid #7f7f7f;
}
table tr td {
  color: #646566;
  padding: 10px 0;
  text-align: center;
  font-size: 0.373333rem;
  border-bottom: 1px solid #7f7f7f;
}
table tr td {
  color: #646566;
  padding: 10px 0;
  text-align: center;
  font-size: 0.373333rem;
  border-bottom: 1px solid #7f7f7f;
  button {
    border-radius: 5px;
    padding: 2px 4px;
    border: none;
    color: #fff;
    background-color: #169bd5;
  }
}
</style>
